<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/img-icon.css"/>
		<link rel="stylesheet" type="text/css" href="css/animation.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function oppositeColor(a){
			    a=a.replace('#','');
			    var c16,c10,max16=15,b=[];
			    for(var i=0;i<a.length;i++){   
			        c16=parseInt(a.charAt(i),16);//  to 16进制
			        c10=parseInt(max16-c16,10);// 10进制计算
			        b.push(c10.toString(16)); // to 16进制
			    }
			    return '#'+b.join('');
			}
			var keyboard_enable = false;//快捷键是否启动
			$(function(){
				$(document).keydown(function (event) {
				    if (event.ctrlKey && event.keyCode == 13) {
				    	if(keyboard_enable){
				    		keyboard_enable = false;
				    		$('.keymove').removeClass('keymove');
				    	}else{
				    		keyboard_enable = true;
				    	}
				    };
				    if(!keyboard_enable)return;
				    if(!event.shiftKey)return;
				    var key_move = $('div.tab-item:eq('+$('div.tab-title li.hover[keymove]').index()+') div.keymove');
				    if(event.keyCode>=49&&event.keyCode<=57){
			    		$('div.tab-title li').eq(event.keyCode-49).find('a').click();
				    }
				    switch (event.keyCode) {
			    	case 13:
				    	if(key_move[0]){
				    		key_move.parent().click();
				    	}
				    	break;
				    case 37://左
				    	if(key_move[0]){
				    		key_move.removeClass('keymove').parent().prev().find('.t-d-item').addClass('keymove');
				    	}else{
					    	$('div.tab-title li.hover').prev().find('a').click();
				    	}
				        break;
				    case 38://上
				    	if(key_move[0]){
				    		key_move.removeClass('keymove');
				    	}
				    	break;
				    case 39://右
				    	if(key_move[0]){
				    		key_move.removeClass('keymove').parent().next().find('.t-d-item').addClass('keymove');
				    	}else{
					    	$('div.tab-title li.hover').next().find('a').click();
				    	}
				    	break;
				    case 40://下
				    	if($('div.tab-title li.hover[keymove]')[0]){//可操作下方
					    	var $tditems = $('div.tab-item').eq($('div.tab-title li.hover[keymove]').index()).find('div.t-d-item');
					    	if(!$tditems.filter('.keymove')[0]){
					    		$tditems.eq(0).addClass('keymove');
					    	}
				    	}
				        break;
				    case 67://close
				    	if($('div.double-left').is(':visible')){
				    		$('div.double-left a').click();
				    	}
				    	break;
			    	case 69://exit
				    	$('#shutdown_system').click();
				    	break;
				    };
				});
				
				var $contents = $('div.tab-content div.tab-item');
				$("div.tab-title ul li.hover").each(function(){
					var index = $(this).index();
					$contents.filter(function(){
						return index==$(this).index();
					}).hide();
					$contents.eq($(this).index()).show();
				});
				$("div.tab-title ul li a").click(function(){
					if($(this).parent().hasClass('hover'))return;
					$("div.tab-title ul li.hover").removeClass('hover');
					var index = $(this).parent().index();
					$contents.filter(function(){
						return $(this).index()!=index;
					}).hide();
					$contents.eq($(this).parent().index()).show();
					$(this).parent().addClass('hover');
					var $dl = $('div.double-left[index'+$(this).parent().index()+']');
					var $ddl = $('div.double-left').show();
					if($dl[0]){
						$ddl.show();
					}else{
						$ddl.hide();
					}
				});
				$("div.double-left div.double-left-txt").click(function(){
					var index = $('div.tab-title li.hover').index();
					var $ti = $('div.tab-item').eq(index);
					$ti.find('div.tab-ajax-content').prevAll().show();
					$ti.find('div.tab-ajax-content').removeClass('a-bounceinL').addClass('a-bounceoutR');
					setTimeout(function(){
						$ti.find('div.tab-ajax-content').hide().removeClass('a-bounceoutR');
					},1000);
					$('div.double-left').removeAttr('index'+index).hide();
				});
			});
			
			function ajax_sending(){
				var status = arguments[0];
				var $sending = $('div.ajax-sending');
				if(status){
					$sending.addClass('move80');
					setTimeout(function(){
						$sending.addClass('move100');
						setTimeout(function(){
							$sending.removeClass('move80 move100');
						},300);
					},8000);
				}else{
					$sending.removeClass('move80 move100');
				}
			}
			
			$.ajaxSetup({ 
		    	beforeSend:function(){
		    		ajax_sending(true);
		    	},
		    	cache:false,
		        statusCode:{  
		        	400:function(){
		        		
		        	},
		            404:function(data){
		            	
		            },
		            500:function(){
		            	
		            },
		            403:function(data){
		            	
		            },
		            401:function(data){
		            	
		            },
		            200:function(){
		            	ajax_sending(false);
		            }
		        }
		    });
			
			function ajax_load_click(){
				var $url = arguments[0];
				var $index = $('div.tab-title li.hover').index();
				var $item = $('div.tab-item').eq($index);
				var $move = $item.find('div.tab-move');
				$move.addClass('a-bounceoutB');
				setTimeout(function(){
					$.ajax({
						type:"get",
						url:$url,
						success:function(){
							setTimeout(function(){
								var $dl = $('div.double-left');
								if($('div.tab-title li.hover').index()==$index){
									$dl.show().addClass('a-bounceinT');
								}
								setTimeout(function(){
									$dl.removeClass('a-bounceinT');
									$item.find('div.tab-ajax-content').removeClass('a-bounceinL');
								},1000);
							},1000);
							$('div.double-left').attr('index'+$index,"");//增加attr
							$move.hide().removeClass('a-bounceoutB');
							$item.find('div.tab-ajax-content').addClass('a-bounceinL').show().html(arguments[0]);
						}
					});
				},1000);
			}
			function ajax_load_dbclick(){
				var $self = $(arguments[0]);
				if(!$('div.double-left').is(':visible'))return;
				var $item = $('div.tab-item').eq($self.parent().index());
				$item.find('div.tab-move').show();
				$item.find('div.tab-ajax-content').addClass('a-bounceoutR');
				$('div.double-left').show().addClass('a-bounceoutT');
				$('div.double-left').removeAttr('index'+$('div.tab-title li.hover').index());//删除attr
				setTimeout(function(){
					$('div.double-left').hide().removeClass('a-bounceinL').removeClass('a-bounceoutT');
					$item.find('div.tab-ajax-content').hide().removeClass('a-bounceoutR');
				},1000);
			}
		</script>
	</head>
	<body>
		<div class="g-north">
			<div class="index-title">
				<div class="title-left">
					<ul>
						<li class="logo-img"><img src="img/logo.png"/></li>
						<li class="logo-txt"><a title="IISP系统" href="javascript:void(0);">IISP系统</a></li>
					</ul>
				</div>
				<div class="title-right">
					<ul>
						<li><a class="imgicon-shutdown" id="shutdown_system" title="退出系统" href="javascript:void(0);"></a></li>
						<li><a class="imgicon-tools" title="工具" href="javascript:void(0);"></a></li>
						<li><p>[ 研发部 ] 黄焕来</p></li>
						<li class="user-head"><a href="javascript:void(0);" onclick="ajax_load_click('json.html')"><img src="img/head.jpg"/></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="g-west">
		    
		</div>
		<div class="g-center">
			<div class="tab-box">
				<div class="tab-title">
					<ul>
						<li class="hover"><a title="个人办公" href="javascript:void(0);">个人办公</a></li>
						<li keymove><a ondblclick="ajax_load_dbclick(this);" title="个人桌面" href="javascript:void(0);">个人桌面</a></li>
						<li keymove><a title="综合行政" href="javascript:void(0);">综合行政</a></li>
					</ul>
				</div>
				<div class="ajax-sending">
					<p></p>
				</div>
				<div class="tab-content">
					
					<div class="tab-item">
						<div class="tab-move">
							<div class="tab-table">
								<div class="t-t-bg" style="background: #009FB2;" bg="#009FB2">
									<table class="m-table m-table-row" style="margin-bottom:4px;">
									    <thead>
									        <tr><th style="width: 190px;">个人通知</th><th style="width: 80px;"></th><th></th></tr>
									    </thead>
									    <tbody>
									    </tbody>
									</table>
									<div id="my-acdive1" class="tab-pagination">
										
									</div>
									<script type="text/javascript">
										function pageselectCallback(page, jq){
											$.ajax({
												type:'get',
												url:'list.json?rows=7&page='+(page+1),
												success:function(data){
												 	
												}
											});
										    return true;
										}
										$(function(){
											$.ajax({
												type:'get',
												url:'list.json?page=0&rows=5',
												success:function(data){
													var $my = $("#my-acdive1");
												 	$my.pagination(data.total,{callback:pageselectCallback});
												 	
												 	$tbody = $my.prev().find('tbody');
												 	$tbody.empty();
												 	$.each(data.rows, function(index,item) {
												 		$('<tr><td><a href="javascript:void(0);" onclick="ajax_load_click(\'json.html\');">'+item.username+'</a></td><td>'+item.createTime+'</td><td>'+(item.id>50?'●':'')+'</td></tr>').appendTo($tbody);
												 	});
												}
											});
										});
									</script>
								</div>
							</div>
							<div class="tab-table" >
								<div class="t-t-bg" style="background: #5B31B9;" bg="#5B31B9">
									<table class="m-table m-table-row" style="margin-bottom:4px;">
									    <thead>
									        <tr><th style="width: 190px;">个人通知</th><th></th></tr>
									    </thead>
									    <tbody>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-16-14</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									    </tbody>
									</table>
									<div id="my-acdive2" class="tab-pagination">
										
									</div>
									<script type="text/javascript">
										 $("#my-acdive2").pagination(1000,{});
									</script>
								</div>
							</div>
							<div class="tab-table" >
								<div class="t-t-bg" style="background: #5B31B9;" bg="#5B31B9">
									<table class="m-table m-table-row" style="margin-bottom:4px;">
									    <thead>
									        <tr><th style="width: 190px;">个人通知</th><th></th></tr>
									    </thead>
									    <tbody>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-16-14</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									        <tr><td>内容内容内容内容内容内容内容</td><td>2015-12-12</td></tr>
									    </tbody>
									</table>
									<div id="my-acdive3" class="tab-pagination">
										
									</div>
									<script type="text/javascript">
										 $("#my-acdive3").pagination(1000,{});
									</script>
								</div>
							</div>
							<div class="tab-table" >
								<div class="t-t-bg" style="background: #5B31B9;" bg="#5B31B9">
									<table class="m-table m-table-row" style="margin-bottom:4px;">
									    <thead>
									        <tr><th style="width: 190px;">个人通知</th><th></th></tr>
									    </thead>
									    <tbody>
									    </tbody>
									</table>
									<div id="my-acdive4" class="tab-pagination">
										
									</div>
									<script type="text/javascript">
										 $("#my-acdive4").pagination(1000,{});
									</script>
								</div>
							</div>
						</div>
						<div class="tab-ajax-content"></div>
					</div>
					<div class="tab-item">
						<div class="tab-move">
							<a href="javascript:void(0);" onclick="ajax_load_click('json.html');">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
										<input type="hidden" name="url" value="json.html" />
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
							<a href="javascript:void(0);" onclick="ajax_load_click(this);">
								<div class="t-d-item">
									<p class="img">
										<img src="img/icons/2.png"/>
									</p>
									<p class="txt">
										知识管理
									</p>
								</div>
							</a>
						</div>
						<div class="tab-ajax-content"></div>
					</div>
					<div class="tab-item">
						
					</div>
				</div>
			</div>
		</div>
		<div class="g-east">
		    
		</div>
		<div class="g-south">
		    
		</div>
		
		<div class="double-left" style="display: none;">
			<div class="double-left-bg"></div>
			<div class="double-left-txt"><a href="javascript:void(0);"></a></div>
		</div>
	</body>
</html>
